<template>
  <div class="appContent">
    <div class="headerB">
      <HeaderCom></HeaderCom>
    </div>
    <div class="box">
      <div class="left">
        <NaverCom></NaverCom>
      </div>
      <div class="right">
        <MainerCom></MainerCom>
        <CommentSrr></CommentSrr>
      </div>
    </div>
    <div class="fooerB">
      <FooterCom></FooterCom>
      <CommentSrr></CommentSrr>
    </div>
  </div>
</template>
<script>
// 方式一 局部注册组件,方式什么时候用看情况而异
import HeaderCom from "./components/HeaderCom.vue";
import FooterCom from "./components/FooterCom.vue";
import MainerCom from "./components/MainerCom.vue";
import NaverCom from "./components/NaverCom.vue";
export default {
  components: {
    HeaderCom,
    FooterCom,
    MainerCom,
    NaverCom
  },
  data () {
    return {};
  },
  created () { },
  computed: {},
  methods: {}
};
</script>
<style lang='less'  scoped>
.appContent {
  background-color: purple;
  height: 100vh;
  width: 70vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .headerB {
    background-color: skyblue;
    height: 20vh;
    width: 100%;
  }
  .fooerB {
    background-color: orange;
    height: 20vh;
    width: 100%;
  }
  .box {
    flex: 1;
    display: flex;
    .left {
      width: 30%;
      margin-right: 10px;
      background-color: pink;
    }
    .right {
      flex: 1;
      background-color: greenyellow;
    }
  }
}
</style>


